<template>
  <div class="bodyBG">
    <div class="inClassContent">
        <div class="inClassContentTitle">{{data.Lession.Version+data.Lession.SubVersion+data.Lession.SubjectName+data.Lession.UpOrDown}} &gt; {{data.Lession.LessonTitle}}</div>
        <div class="inClassMes">
            <div class="inClassLeft">
                <div class="inClassLeft_c">
                    <div class="headImg">
                        <div class="headImg2" style="background-size:cover"></div>
                    </div>
                  
                    <div class="inClassTeacherName">{{data.UserName}}</div>
                    <div class="inClassIdentity">老师</div>
                </div>
            </div>
            <div class="inClassRight">
                <div class="inClassRight_c">
                    <div class="inClassRight_Course">{{data.SubjectName}}</div>
                    <div class="inClassClass"><img src="../assets/Group 5.svg"  style="vertical-align: text-bottom;"><span>&nbsp;{{className}}</span></div>
                    <div><img src="../assets/students.svg" style="vertical-align: text-bottom;"/><span>&nbsp;{{data.UserNum.UserNum}}个学生正在聆听</span></div>
                    <div></div>
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
export default {
  name: 'main',
  data() {
    return {
      data : window.mainRouteInfo,
      className:this.$store.state.userInfo.ClassName
    }
  },
  mounted() {
    var _this=this;
    if(!window.mainRouteInfo){
       _this.$http.get('api/lession/inClass?sk='+_this.$store.state.token+'&cid='+_this.$store.state.userInfo.ClassID).then(function (res) {
              if(res.data.state==200){
                    setTimeout(function () {
                      if(!!res.data.data && !! res.data.data.Lession){
                          window.mainRouteInfo = res.data.data
                          _this.$router.replace({
                              name: 'main'
                          })
                      }else{
                          _this.$router.push({
                              path: '/loading'
                          })
                      }
                  }, 100);
              }else{
                    _this.$router.push({
                      path: '/loading'
                  })
              }
          })
    }
  }
}
</script>

<style lang="scss">
.bodyBG {
    background: url("../assets/bg1.png") center no-repeat;
    background-size: cover;
    font-family: "Microsoft YaHei";
    width:100%;
    height:100%;
}
.inClassContent {
    width: 625px;
    height: 550px;
    margin: 0 auto;
    padding-top: 280px;
}
.inClassContentTitle {
    width: 600px;
    height: 60px;
    margin: 0 auto;
    line-height: 60px;
    font-size: 18px;
    color: #000;
    background: #FFFFFF;
    box-shadow: 0 3px 12px 0 #233376;
    border-radius: 60px;
    text-align: center;
}
.inClassMes {
    width: 625px;
    height: 355px;
    margin-top: 90px;
    padding-top: 60px;
    background: #FFFFFF;
    box-shadow: 0 3px 12px 0 #233376;
    border-radius: 7.5px;
    box-sizing: border-box;
}
.inClassLeft {
    width: 300px;
    height: 100%;
    float: left;
}
.inClassLeft_c {
    width: 150px;
    height: auto;
    margin: 0px 0 0 120px;
}
.headImg {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: #c9d0ec;
    padding: 5px;
    margin: 0 auto 20px auto;
}
.headImg2 {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: url("../assets/admin.png") center;
    background-size: cover;
}
.inClassTeacherName {
    font-size: 30px;
    color: #56545A;
    text-align: center;
    font-weight: 600;
}
.inClassIdentity {
    height: 40px;
    font-size: 22px;
    color: #262400;
    text-align: center;
    line-height: 40px;
}
.inClassRight {
    width: 325px;
    height: 100%;
    float: left;
}
.inClassRight_c {
    width: 200px;
    padding-left: 20px;
}
.inClassRight_c > .inClassRight_Course {
    width: 200px;
    height: 60px;
    text-align: center;
    font-size: 18px;
    color: #FFFFFF;
    line-height: 60px;
    background: #204FC9;
    border-radius: 60px;
    padding: 0;
    margin-top: 10px;
}
.inClassRight_c > div {
    width: 180px;
    margin: 0 auto;
    padding: 7px 0;
}
.inClassRight_c > .inClassClass {
    padding-top: 0;
    margin-top: 85px;
}

</style>
